<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script>
//Promise 是一种异步编程的方式
  //参数=>函数(resolve,reject)
  //resolve,reject 它们本身就是函数
  //这是一种链式编程
  new Promise((resolve, reject) => {
    //第一次网络请求的代码
    setTimeout(() => {
      resolve()
    }, 1000)
  }).then(() => {
    //第一次拿到结果的处理代码
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');

    return new Promise((resolve, reject) => {
      //第二次网络请求的代码
      setTimeout(() => {
        resolve()
      },1000)
    }).then(()=>{
      //第二次拿到结果的代码
      console.log('Hello Vue.Js');
      console.log('Hello Vue.Js');
      console.log('Hello Vue.Js');
      console.log('Hello Vue.Js');
      console.log('Hello Vue.Js');
      console.log('Hello Vue.Js');

      return new Promise((resolve, reject) =>{
        //第三次网络请求的代码
        setTimeout(()=>{
          resolve()//调用resolve处理结果(then中的)
        },1000)
      }).then(()=>{
        //第三次拿到结果的代码
        console.log('Hello Java');
        console.log('Hello Java');
        console.log('Hello Java');
        console.log('Hello Java');
        console.log('Hello Java');
        console.log('Hello Java');
      })
    })
  })

  //什么情况下会用到Promise?
  //一般情况下有异步操作时，使用Promise对这个异步操作进行封装
  //new -> 构造函数（1.保存了一些状态信息  2.执行传入的函数）
  //在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数
  //Promise希望在then中处理网络请求
  //调用resolve就会调用then函数，resolve中的参数就会添加到then中
  new Promise((resolve, reject) => {
    //成功的时候调用resolve
    // resolve('Hello world')
//有点类似于Java中的异常处理形式
    //失败的时候调用reject
    reject('Hello Vue.js')
  }).then((data)=>{
    //then中的处理代码(成功时来到then中处理)
    console.log(data);
    document.writeln(data)
  }).catch((err)=>{
    //失败时来到catch中处理 表示已经捕获这个错误
    console.log(err);
    document.writeln(err)
  })

</script>

</body>
</html>
